<template>
  <view>
    <!-- width: 332rpx; -->
    <view
      v-if="props.type === 'idCard'"
      class="id-card"
      :class="props.textState ? '' : 'no-id-card'">
      <text
        v-if="props.textState"
        class="top-text"
        >{{ props.title }}</text
      >

      <view
        v-if="imageValue"
        class="img-box url-img"
        @click="onImg">
        <image
          :src="imageValue"
          :mode="props.textState ? 'heightFix' : ''"></image>
      </view>
      <image
        v-else
        src="/static/id-card.svg"
        mode="widthFix"
        class="img-box"
        @click="onImg"></image>

      <view
        v-if="props.textState"
        style="width: 100%">
        <view
          v-if="props.textState === '0'"
          class="bottom-text">
          <text>{{ $t('img.text1') }}</text>
          <text>{{ $t('img.text2') }}</text>
          <text>{{ $t('img.text3') }}</text>
          <text>{{ $t('img.text3-1') }}</text>
          <text>{{ $t('img.text3-2') }}</text>
        </view>

        <view
          v-if="props.textState === '1'"
          class="bottom-text">
          <text>{{ $t('img.text4') }}</text>
          <text>{{ $t('img.text5') }}</text>
          <text>{{ $t('img.text6') }}</text>
          <text>{{ $t('img.text7') }}</text>
        </view>

        <view
          v-if="props.textState === '2'"
          class="bottom-text">
          <text>{{ $t('img.text8') }}</text>
          <text>{{ $t('img.text9') }}</text>
          <text>3. 훼손 가림 스크린 캡처 이미지는 인정되지 않습니다</text>
        </view>

        <view
          v-if="props.textState === '3'"
          class="bottom-text">
          <text>{{ $t('img.text10') }}</text>
          <text>{{ $t('img.text11') }}</text>
          <text>{{ $t('img.text12') }}</text>
        </view>
        <view
          v-if="props.textState === '4'"
          style="width: 100%"
          class="bottom-text">
          <text>{{ $t('img.text13') }}</text>
          <text>{{ $t('img.text14') }}</text>
          <text>{{ $t('img.text15') }}</text>
        </view>
        <view
          v-if="props.textState === '5'"
          class="bottom-text">
          <text>{{ $t('img.text16') }}</text>
          <text>{{ $t('img.text17') }}</text>
          <text>{{ $t('img.text18') }}</text>
          <text>{{ $t('img.text19') }}</text>
          <text>{{ $t('img.text20') }}</text>
        </view>
        <view
          v-if="props.textState === '6'"
          class="bottom-text">
          <text>{{ $t('img.text21') }}</text>
          <text>{{ $t('img.text22') }}</text>
          <text>{{ $t('img.text23') }}</text>
        </view>
      </view>
      <text
        v-else
        class="bottom-text">
        {{ props.title }}
      </text>
    </view>
    <view
      v-else-if="props.type === 'video'"
      class="id-card video-model">
      <!-- <image
        v-if="imageValue[0]"
        :src="imageValue[0]"
        @click="onImg"></image>
      <image
        v-else
        src="/static/id-card.svg"
        mode="heightFix"
        @click="onImg"></image> -->
      <text class="top-text">{{ props.title }}</text>
      <view
        v-if="imageValue"
        class="top-video">
        <video
          :src="imageValue"
          class="video-box"></video>
        <view
          class="video-mask"
          @click="onImg"
          >从新上传</view
        >
        <!-- 删除按钮 -->
        <!-- <view
          v-if="imageValue[0]"
          class="close-icon"
          @click="onDelete">
          <uni-icons
            type="closeempty"
            color="#fff"
            size="14"></uni-icons>
        </view> -->
      </view>
      <image
        v-else
        src="/static/id-card.svg"
        mode="widthFix"
        class="img-box"
        @click="onImg"></image>
      <view
        v-if="props.textState === '4'"
        style="width: 100%"
        class="bottom-text">
        <text>{{ $t('img.text13') }}</text>
        <text>{{ $t('img.text14') }}</text>
        <text>{{ $t('img.text15') }}</text>
      </view>
      <view
        v-if="props.textState === '7'"
        style="width: 100%"
        class="bottom-text">
        <text>{{ $t('img.text24') }}</text>
        <text>{{ $t('img.text25') }}</text>
        <text>{{ $t('img.text26') }}</text>
      </view>
    </view>
    <view
      v-else
      class="file-picker">
      <uni-file-picker
        ref="files"
        :limit="1"
        :auto-upload="false"
        :file-mediatype="props.type === 'video' ? 'video' : 'image'"
        mode="grid"
        @select="onSelect"
        @delete="onDelete"
        class="cb-file" />
    </view>
  </view>
</template>

<script setup>
  import { uploadSingleFile } from '@/utils/uploadFile'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  const imageValue = defineModel({
    type: [String, Array],
    default: () => []
  })

  // 文案 textState 0: 身份证正面 1：手持身份证 2：营业执照 3:银行卡照片 4：小额支付明细视频
  const props = defineProps(['title', 'type', 'textState'])

  const onSelect = async (e) => {
    const upData = e.tempFiles.map((v) => v.path)[0]
    imageValue.value = await uploadSingleFile(upData, { url: '/api/common/video/upload' })
  }

  const onDelete = () => {
    imageValue.value = ''
  }

  const onImg = () => {
    if (props.type === 'video') {
      uni.chooseVideo({
        success: async (e) => {
          // imageValue.value = e.tempFilePath

          if (e.size > 30 * 1024 * 1024) {
            uni.showToast({
              title: t('enterprise.id.title6'),
              icon: 'none'
            })
            return
          }

          imageValue.value = await uploadSingleFile(e.tempFilePath, {
            url: '/api/common/video/upload'
          })
        }
      })
    } else {
      uni.chooseImage({
        count: 1,
        success: async (e) => {
          if (e.tempFiles[0].size > 10 * 1024 * 1024) {
            uni.showToast({
              title: t('enterprise.id.title7'),
              icon: 'none'
            })
            return
          }
          const imgUrl = e.tempFiles.map((v) => v.path)[0]
          imageValue.value = await uploadSingleFile(imgUrl, { url: '/api/common/upload' })
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .file-picker {
    padding-bottom: 10rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;

    .cb-file {
      :deep(.is-add) {
        border-radius: 16rpx !important;
        border: 2rpx dashed #3462fe !important;

        .icon-add {
          background: #3462fe !important;
        }
      }
    }
  }

  .id-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    .img-box,
    .video-box {
      width: 100%;
      // height: 224rpx;
    }

    .top-video {
      position: relative;
      width: 100%;
      // height: 224rpx;

      .video-box,
      .video-mask {
        // position: absolute;
        // top: 0;
        // left: 0;
      }

      .video-box {
        z-index: 1;
      }

      .video-mask {
        width: 100%;
        height: 100%;
        z-index: 2;
        background: transparent;
      }

      .close-icon {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 3;
        width: 40rpx;
        height: 40rpx;
        line-height: 36rpx;
        border-radius: 40rpx;
        background: rgb(230, 62, 62);
        z-index: 3;
        text-align: center;

        text {
          margin-right: 2rpx;
        }
      }
    }

    .bottom-text,
    .top-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .top-text {
      margin: 32rpx;
    }

    .bottom-text {
      margin-top: 32rpx;
      display: flex;
      flex-direction: column;
      text-align: justify;

      text + text {
        margin-top: 14rpx;
      }

      text {
        line-height: 40rpx;
      }
    }
  }

  .no-id-card {
    width: 332rpx !important;

    .img-box,
    .top-video {
      width: 332rpx !important;
      height: 224rpx !important;
    }

    .video-box {
      height: 224rpx !important;
    }

    .bottom-text {
      text-align: center;
    }
  }

  .video-model {
    height: 100%;

    .video-mask {
      height: 94rpx;
      line-height: 94rpx;
      width: 100%;
      text-align: center;
      border-radius: 64rpx;
      border: 2rpx solid #3462fe;
      margin-top: 40rpx;
    }
  }

  .url-img {
    border: 2rpx dashed #8d8d8d;
    padding: 14rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40rpx;
    overflow: hidden;
  }
</style>
